<template>
	<view class="profit">
		<view class="userinfo">
			<image v-if="info.head_url == null" src="/static/img/logo.png" mode=""></image>
			<image v-else :src="info.head_url" mode=""></image>
			<view class="infobox">
				<view class="username">
					{{info.username}}
				</view>
				<view class="name">
					推荐人：{{info.recommend}}
				</view>
				<view class="level">
					{{info.level_name}}
				</view>
			</view>
		</view>
		<view class="codebox">
			<uni-icons type="auth-filled" color="#FEA23D" size="20px"></uni-icons>
			<text>我的邀请码：{{info.recommend_code}}</text>
		</view>
		<view class="balancebox">
			<view class="balance_num">
				{{info.balance_3}}
				<text>(≈ {{info.cny}})</text>
			</view>
			<text>我的YSB<text style="color: red;font-weight: bolder;">({{coin_rate}}/YSB)</text></text>
		</view>
		<view class="detailbox">
			<view class="detail_list" v-for="(item,index) in navList" :key="item.id"
				@click="toPage('./detail/detail?id=' + item.id +'&title=' + item.text + '&leixing=' + item.leixing)">
				<uni-icons customPrefix="iconfont" :type="item.icon" size="35" :color="item.color"></uni-icons>
				<view class="list_text">
					<text class="name">{{item.text}}</text>
					<text v-if="item.id ==1">{{info.active}}</text>
					<text v-if="item.id ==2">{{info.un_active}}</text>
					<text v-if="item.id ==3">{{info.day_reward}}</text>
					<text v-if="item.id ==4">{{info.share}}</text>
					<text v-if="item.id ==5">{{info.team_reward}}</text>
					<text v-if="item.id ==6">{{info.service}}</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		Assets
	} from "@/api/user.js"
	export default {
		data() {
			return {
				navList: [{
						id: 1,
						text: '已激活绿色积分',
						icon: 'icon-yixuan',
						color: '#4AE9AA',
						leixing: 1
					},
					{
						id: 2,
						text: '待激活绿色积分',
						icon: 'icon-shizhongfill',
						color: '#F9A936',
						leixing: 2
					},
					{
						id: 3,
						text: '空投奖励',
						icon: 'icon-jiangpinguanli',
						color: '#FA6095',
						leixing: 3
					},
					{
						id: 4,
						text: '分享奖励',
						icon: 'icon-fenxiang',
						color: '#47A3FC',
						leixing: 4
					},
					{
						id: 5,
						text: '团队打赏',
						icon: 'icon-jianglidan',
						color: '#F9A936',
						leixing: 5
					},
					{
						id: 6,
						text: '运营收益',
						icon: 'icon-caiyouduo_gendanxiangqing-yinglijiangli',
						color: '#66F7B8',
						leixing: 6
					}
				],
				info: [],
				coin_rate: 0,

			}
		},
		onLoad() {
			this.Assets()
		},
		methods: {
			Assets() {
				Assets().then(res => {
					console.log(res);
					this.info = res.data
					this.coin_rate = this.info.coin_rate

				})
			},
			toPage(url) {
				uni.navigateTo({
					url
				})
			}
		}
	}
</script>

<style lang="scss">
	page {
		background: #F3F3F3;
	}

	.detailbox {
		display: table;
		width: 100%;
		padding: 0 10px;
		box-sizing: border-box;
		margin-top: 10px;
		background: #fff;

		.detail_list {
			width: 50%;
			float: left;
			display: flex;
			align-items: center;
			margin: 15px 0;

			image {
				width: 40px;
				border-radius: 50%;
			}

			.list_text {
				display: flex;
				flex-direction: column;
				font-size: 12px;
				color: #999;
				margin-left: 8px;

				.name {
					color: #777;
					font-size: 14px;
					margin-bottom: 5px;
				}
			}
		}
	}

	.balancebox {
		display: flex;
		flex-direction: column;
		padding: 10px 20px;
		background-color: #fff;
		margin-top: 10px;
		color: #777;

		.balance_num {
			color: #FEA23D;
			margin-bottom: 10px;
			font-size: 18px;

			text {
				margin-left: 8px;
			}
		}

		text {
			font-size: 14px;
		}
	}

	.codebox {
		display: flex;
		align-items: center;
		padding: 10px;
		background-color: #fff;
		margin-top: 10px;
		font-size: 14px;

		text {
			margin-left: 5px;
		}
	}

	.userinfo {
		background: #FEA23D;
		display: flex;
		align-items: center;
		color: #fff;
		padding: 10px;

		image {
			width: 70px;
			height: 70px;
			border-radius: 50%;
			margin-right: 15px;
		}

		.username {
			font-size: 14px;
			font-weight: bold;
		}

		.name {
			font-size: 12px;
			margin-top: 3px;
		}

		.level {
			font-size: 12px;
			border: 1px solid;
			padding: 1px 3px;
			border-radius: 20px;
			margin-top: 3px;
			text-align: center;
		}
	}
</style>
